<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐</title>
    <link rel="stylesheet" href="../css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/jquery-3.5.1.js"></script>
    <script src="../js/jquery.mCustomScrollbar.js"></script>
    <script src="../js/index.js"></script>
</head>
<body>
    <div class="header">
        <span><a href="#"></a></span>
        <ul>
            <li class="login">登录</li>
            <li class="set">设置</li>

        </ul>
    </div>
    <div class="content">
        <div class="content_in">
            <div class="content_in_left">
                <ul class="content_tools">
                    <li><img src="../imgs/喜欢.png">收藏</li>
                    <li><img src="../imgs/添加到.png">添加到</li>
                    <li><img src="../imgs/下载.png">下载</li>
                    <li><img src="../imgs/删 除.png">删除</li>
                    <li><img src="../imgs/清空列表.png">清空列表</li>
                </ul>
                <div class="content_list" data-mcs-theme="dark">
                    <ul class="list">
                        <li class="list_title">
                            <div class="check"><span></span></div>
                            <div class="number"></div>
                            <div class="name">歌曲</div>
                            <div class="singer">歌手</div>
                            <div class="time">时长</div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                        <li class="list_music">
                            <div class="check"><span></span></div>
                            <div class="number">1</div>
                            <div class="name">情歌串烧
                                <div class="list_menu">
                                    <a href="javascript:;" title="播放"></a>
                                    <a href="javascript:;" title="添加"></a>
                                    <a href="javascript:;" title="下载"></a>
                                    <a href="javascript:;" title="分享"></a>
                                </div>
                            </div>
                            <div class="singer">Qiaoyang</div>
                            <div class="time">
                                <span>5:20</span>
                                <a href="javascript:;" title="删除"></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content_in_right">
                <div class="sing_info">
                    <a href="javascript:;" class="sing_cover">
                        <img src="../imgs/实验图片1.jpg" alt="">
                    </a>
                    <p>歌曲名:<a href="javascript:;" class="sing_name">情歌串烧</a></p>
                    <p>歌手名:<a href="javascript:;" class="sing_singer">Qiaoyang</a></p>
                    <p>专辑名:<a href="javascript:;" class="sing_album">情歌王子</a></p>
                </div>
                <div class="sing_lyric">
                    <li>第一条歌词</li>
                    <li class="on">第二条歌词</li>
                    <li>第三条歌词</li>
                </div>
            </div>

        </div>
    </div>
    <div class="footer">
        <div class="footer_in">
            <div class="left_menu">
                <a href="javascript:;"><img src="../imgs/上一首.png"></a>
                <a href="javascript:;" class="playToggle"></a>
                <a href="javascript:;"><img src="../imgs/下一首.png"></a>
            </div>
            <div class="middle_menu">
                <div class="middle_menu_top">
                    <span class="music_name">情歌串烧 / Qiaoyang</span>
                    <span class="music_time">00:00 / 05:20</span>
                </div>
                
                <div class="bar_inside">
                    <div class="bar_outside">
                        <div class="bar_ball"></div>
                    </div>
                </div>
                
            </div>
            <div class="right_menu">
                <a href="javascript:;" class="playMode1"></a>
                <a href="javascript:;" class="love_off"></a>
                <a href="javascript:;"><img src="../imgs/下载.png"></a>
                <a href="javascript:;"><img src="../imgs/评论.png"></a>
                <a href="javascript:;" class="switch_off"></a>
            </div>
            <div class="voiceChange">
                <a href="javascript:;"><img src="../imgs/音量.png"></a>
                <div class="voice_bar_inside">
                    <div class="voice_bar_outside">
                        <div class="voice_bar_ball"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mask_bg"></div>
    <div class="mask"></div>
    
</body>
</html>